<script setup lang="ts">
import { ref} from "vue";
import {messageType} from "@/types/component/widgets";
import useMessageStore from '@/store/message'
import useTaskStore from '@/store/task'

const props = withDefaults(
    defineProps<{
      message: messageType | null
    }>(),
    {
      message: null
    }
);
const isFocus = ref<boolean>(false)
const cardOpacity = ref<number>(1)
const messageStore = useMessageStore()
const delCard = (key: string) => {
  cardOpacity.value = 0
  setTimeout(() => {
    messageStore.DEL_MESSAGE(key)
    cardOpacity.value = 1
  },200)
}
const taskStore = useTaskStore()
const openApp = (key: string, name: string) => {
  if (name !== 'system') {
    messageStore.DEL_MESSAGE(key)
    taskStore.OPEN_APP(name)
  }
}
</script>
<template>
  <div class="message-card" @mouseover="isFocus=true" @mouseleave="isFocus = false" :style="{opacity:cardOpacity}">
    <div class="left-content">
      <div class="app-icon" v-if="message.name==='system'">
        <div class="material-icons">settings</div>
      </div>
      <div class="app-icon" v-else></div>
      <div class="info">
        <div class="title">{{ message.messageTitle }}</div>
        <div class="content">{{ message.messageContent }}</div>
      </div>
    </div>
    <div class="right-content" @click="openApp(message.messageKey,message.name)">
      <span class="material-icons">arrow_forward_ios</span>
    </div>
    <div class="close-btn" v-show="isFocus" @click="delCard(message.messageKey)">
      <div class="material-icons">clear</div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.message-card {
  position: relative;
  padding: 10px;
  width: 330px;
  margin: 12px auto;
  height: 90px;
  background-color: rgba(255, 255, 255, .6);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  box-shadow: -2px -1px 7px rgb(0 0 0 / 40%);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  transition: 0.2s;
  transition-property: opacity;

  .left-content {
    display: flex;
    align-items: center;

    .app-icon {
      display: flex;
      align-items: center;
      user-select: none;

      .material-icons {
        font-size: 45px;
      }
    }

    .info {
      margin-left: 8px;

      .title {
        font-size: 14px;
        font-weight: 600;
      }

      .content {
        width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .right-content {
    display: flex;
    align-items: center;
    text-align: center;
    color: #798088;
    cursor: pointer;
    user-select: none;
  }

  .right-content:hover {
    color: #959EA8;
  }

  .right-content:active {
    color: #1B1A1F;
  }

  .close-btn {
    position: absolute;
    left: -6px;
    top: -6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;

    .material-icons {
      user-select: none;
      font-size: 18px;
      font-weight: 600;
      color: #798088;
    }
  }
}
</style>
